<template>
  <a-layout>
    <a-layout-header id="header">
      <div id="head-left">
        <router-link
          to="/"
          style="display: flex; justify-content: center; align-items: center"
        >
          <HomeFilled :style="{ fontSize: '26px' }" id="home-icon" />
        </router-link>
        <div id="head-text">首页</div>
      </div>
      <LogoutOutlined
        :style="{ fontSize: '22px' }"
        id="logout-icon"
        @click="logout"
      />
    </a-layout-header>
    <a-layout-content style="margin: 20px 16px">
      <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
        <div>欢迎使用本系统</div>
      </div>
    </a-layout-content>
    <a-layout-footer style="text-align: center">
      Front Third Group ©2023
    </a-layout-footer>
  </a-layout>
</template>

<style>
#main-form {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

#form-one {
  flex: 1;
}

#form-two {
  flex: 1;
}

#submit-container {
  display: flex;
  gap: 20px;
}

#cancle-button {
  height: 30px;
  width: 40%;
  border: none;
  color: white;
  background-color: rgb(7, 168, 237);
  font-weight: bold;
}

#save-button {
  height: 30px;
  width: 40%;
  border: none;
  color: white;
  background-color: rgb(0, 145, 17);
  font-weight: bold;
}

#header {
  background-color: white;
  display: flex;
  flex-direction: row;
  padding: 0px;
  align-items: center;
}

#head-left {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#home-icon {
  margin-left: 20px;
  margin-right: 20px;
  flex: 1;
}

#head-text {
  font-size: 18px;
  flex: 3;
}

#logout-icon {
  flex: 10;
  display: flex;
  justify-content: end;
  padding-right: 30px;
}
</style>

<script setup>
import { HomeFilled, LogoutOutlined } from "@ant-design/icons-vue";

import apiFunction from "../api/api.js";
const logout = apiFunction.logout;
</script>